import { useModel } from "umi";
import { Form, Button, message, Space, Input } from "antd";

import useCreateProxyServer from "../../hooks/proxy_servers/useCreateProxyServer";

const AddProxyServerForm = ({ reloadData }) => {
    const { onCloseGlobalModal } = useModel("global.modal");
    const [form] = Form.useForm();
    const { loading, createProxyServer } = useCreateProxyServer();

    let onFinish = async (values) => {
        let res = await createProxyServer(values);
        if (res) {
            message.success("成功添加代理服务信息");
            reloadData();
            onCloseGlobalModal();
        }
    };

    const urlValidater = (rule, value) => {
        if (value && validates.isURL(value)) {
            return Promise.resolve();
        } else {
            return Promise.reject("请输入正确的网络地址");
        }
    };

    return (
        <div style={{ padding: "20px 0" }}>
            <Form form={form} layout="horizontal" onFinish={onFinish} labelCol={{ span: 5 }} wrapperCol={{ span: 17 }}>
                <Form.Item label="代理服务URL" name="proxyUrl" validateTrigger="onBlur" rules={[{ required: true, validator: urlValidater }]}>
                    <Input />
                </Form.Item>

                <Form.Item label="代理服务备注" name="proxyTitle">
                    <Input />
                </Form.Item>

                <div style={{ marginTop: 20, textAlign: "center" }}>
                    <Space>
                        <Button loading={loading} type="primary" htmlType="submit">
                            保存
                        </Button>
                        <Button loading={loading} onClick={onCloseGlobalModal}>
                            取消
                        </Button>
                    </Space>
                </div>
            </Form>
        </div>
    );
};

export default AddProxyServerForm;
